<template>
  <div class="widget attribute">
    <el-collapse v-if="!selectNode && selectTabsNode && tabsEditField" v-model="activeNames">
      <el-collapse-item v-if="tabsEditField" title="TABS信息" name="base">
        <xdh-form size="small" :model="commonTabsModel" :footer="false" label-width="80px" @change="handleTabsChange" :edits="true">
          <xdh-form-item v-for="(item, index) in commonTabsFields" :key="index" v-bind="item" />
        </xdh-form>
      </el-collapse-item>
    </el-collapse>
    <div v-show="selectNode">
      <el-collapse v-model="activeNames">
        <el-collapse-item v-if="editField" title="基础信息" name="base">
          <xdh-form size="small" :model="commonModel" :footer="false" label-width="80px" @change="handleChange" :edits="true">
            <xdh-form-item v-for="(item, index) in commonFields" :key="index" v-bind="item" />
          </xdh-form>
        </el-collapse-item>
        <el-collapse-item v-if="tableEditFields" title="基础信息" name="base">
          <xdh-form size="small" :model="commonTableModel" :footer="false" label-width="80px" @change="handleTableChange" :edits="true">
            <xdh-form-item v-for="(item, index) in commonTableFields" :key="index" v-bind="item" />
          </xdh-form>
        </el-collapse-item>

        <el-collapse-item v-if="editField" title="属性设置" name="attr">
          <div v-if="selectNode" size="mini" label-position="left" label-width="80px" :model="selectNode">
            <xdh-form size="small" :model="extendModel" :footer="false" label-width="120px" @change="handleChanges" :edits="true">
              <xdh-form-item v-for="(item, index) in extendFields" :key="index" v-bind="item" />
            </xdh-form>
          </div>
        </el-collapse-item>

        <el-collapse-item v-if="tableEditFields" title="属性设置" name="attr">
          <div v-if="selectNode && !tableEditFields.children" size="mini" label-position="left" label-width="80px" :model="selectNode">
            <xdh-form size="small" :model="extendTableModel" :footer="false" label-width="120px" @change="handleTableChangeExtend" :edits="true">
              <xdh-form-item v-for="(item, index) in extendTableFields" :key="index" v-bind="item" />
            </xdh-form>
          </div>
          <ChildEditor v-if="tableEditFields.children" :content.sync="tableEditFields.children" :extendTableModel="extendTableModel" :extendTableFields="extendTableFields" :tableEditField="tableEditFields" />
        </el-collapse-item>

        <el-collapse-item v-if="editField" title="校验设置" name="event">
          <attr-event v-if="selectNode" :content.sync="selectNode.rules" />
        </el-collapse-item>

        <el-collapse-item v-if="editField" title="选项数据" name="seldata">
          <attr-data v-if="selectNode" :content.sync="selectNode.options" :type="selectNode.type" />
        </el-collapse-item>
      </el-collapse>
    </div>
    <i v-show="!selectNode && !tabsEditField && !selectTabsNode" class="el-icon-info icon-nodata nodata" />
    <div v-show="forbidEdit" class="forbid-edit-mask" />
  </div>
</template>
<style lang="stylus" rel="stylesheet/stylus" type="text/stylus">
.widget.attribute {
  position: relative;
  padding: 5px !important;

  .el-input-group__append {
    padding: 0 10px;
    cursor: pointer;
  }

  .update {
    padding: 20px 10px;
    text-align: center;

    .desc {
      text-align: left;
      margin: 10px 5px;
    }
  }

  .id-lock {
    position: absolute;
    right: 0;
    top: 0;
  }

  .alerttip {
    margin-bottom: 5px;
  }

  .noselect {
    font-size: 20px;
    color: #aaa;
    font-weight: bolder;
    text-align: center;
  }

  .form-item {
    margin-bottom: 5px;
    padding: 5px;

    &:hover {
      background-color: #6081bd33;
      border-radius: 5px;

      .label {
        color: #ffffff;
      }
    }

    .label {
      font-weight: bold;
      display: inline-block;
      margin-bottom: 4px;
      font-size: 12px;
      min-width: 70px;
    }

    .value {
      color: #909399;
    }
  }
}
</style>

<script type="text/ecmascript-6">
/**
 * 组件属性编辑器，每个组件的各个设置都是通过这里分发处理
 */
import { mapGetters, mapState } from 'vuex'
import BaseComponent from '@/widgets/extend/BaseComponent'
import AttrData from '../attr/Data'
import Resource from '../attr/Resource'
import AttrEvent from '../attr/Event'
import ChildEditor from '../attr/Child'
import AttrFunction from '../attr/Function'
// import YColorPicker from '../style/ColorPicker'
import Vue from 'vue'
import cLoader from '@/widgets/extend/componentLoader'

import XdhForm from '@/widgets/xdh-form'
import XdhFormItem from '@/widgets/xdh-form/xdh-form-item'

const VERSION_CACHE = {}

export default {
  name: 'Attribute',
  components: { Resource, AttrData, AttrFunction, AttrEvent, XdhForm, XdhFormItem, ChildEditor },
  mixins: [BaseComponent],
  props: {
    active: {
      type: [Number, Boolean],
      default: 0
    }
  },
  data: function () {
    return {
      activeNames: ['base', 'animate', 'attr'],
      selectNode: null,
      selectTabsNode: null,
      newNodeInfo: null,
      forbidEdit: false,
      vm: null,
      state: '',
      tableEditFields: null,
      editType_flag: ''
    }
  },
  computed: {
    ...mapState(['editField', 'tabsEditField', 'tableEditField', 'ButtonEditField']),
    ...mapGetters(['commonFields', 'commonModel', 'extendFields', 'extendModel', 'commonTabsModel', 'commonTabsFields', 'commonTableModel', 'commonTableFields', 'extendTableModel', 'extendTableFields']),
    editType: {
      get() {
        if (this.$store.state.editType) {
          this.editType_flag = this.$store.state.editType['flag']
          return this.$store.state.editType['type'] || "";
        }

      },
      set() {

      }
    }
  },
  watch: {
    active: function (params) {
      if (this.active) {
        this.onSelectOne(window.$vue)
      }
    },
    selectNode: function (newNode) {
      this.$store.dispatch('user/setNodeinfo', newNode)
      console.log('selectNode', newNode)
      if (newNode && newNode.lock) {
        this.forbidEdit = true
      } else {
        this.forbidEdit = false
      }
    },
    editField: {
      handler(newValue, oldValue) {
        this.onSelectOne(newValue)
      },
      deep: true
    },
    tableEditField: {
      handler(newValue, oldValue) {
        console.log('edittable', '==============================')
        this.onSelectOne(newValue)
      },
      deep: true
    },
    ButtonEditField: {
      handler(newValue, oldValue) {
        console.log('buttonedittable', '==============================')
        this.onSelectOne(newValue)
      },
      deep: true
    },
    tabsEditField: {
      handler(newValue, oldValue) {
        this.onSelectTabsOne(newValue)
      },
      deep: true
    }
  },
  created() {
    this.state = this.$store.state
    console.log(this.$store.getters)
  },
  mounted: function () {
    // 绑定被选中事件。确保只有一个元素被激活
    this.onSelectOne(window.$vue)
    // window.$vue && this.onSelectOne(window.$vue)
    this.ema.bind('select.oneInfo', ({ vm }) => {
      this.onSelectOne(vm)
    })
    this.ema.bind('edit-type.change', type => {
      this.forbidEdit = type !== 'EDITOR'
    })
    this.ema.bind('select.noOne', () => {
      this.selectNode = null
      this.newNodeInfo = null
      // this.selectTabsNode = null
      this.vm = null
    })
  },
  methods: {
    handleTabsChange(model) {
      const newField = JSON.parse(JSON.stringify({
        ...this.tabsEditField,
        ...model
      }))
      if (!newField.depend) {
        delete newField.depend
        delete newField.dependValue
      }
      console.log(newField, 456789)
      console.log(this.$store.getters, 456789)
      this.$store.commit('updateTabsField', newField)
    },

    handleTableChange(model) {
      var Editsfields = this.editType == 'table' ? this.tableEditField : this.ButtonEditField;
      const newField = JSON.parse(JSON.stringify({
        ...Editsfields,
        ...model
      }))
      if (!newField.depend) {
        delete newField.depend
        delete newField.dependValue
      }
      console.log(newField, 456789)
      console.log(this.$store.getters, 456789)
      if (this.editType == 'table') {
        this.$store.commit('updateTableField', newField)
      } else {
        this.$store.commit('updateButtonField', { field: newField, types: this.editType_flag })
      }

    },
    handleChange(model) {
      const newField = JSON.parse(JSON.stringify({
        ...this.editField,
        ...model
      }))
      if (!newField.depend) {
        delete newField.depend
        delete newField.dependValue
      }
      console.log(newField, 456789)
      console.log(this.$store.getters, 456789)
      this.$store.commit('updateField', newField)
    },
    handleChanges(props) {
      const newField = JSON.parse(JSON.stringify({
        ...this.editField,
        props: { ...props }
      }))
      console.log(newField, 456789000000000)
      this.$store.commit('updateField', newField)
    },
    handleTableChangeExtend(props) {
      // console.log(this.editType, '------------------------------')
      var Editsfields = this.editType == 'table' ? this.tableEditField : this.ButtonEditField;
      const newField = JSON.parse(JSON.stringify({
        ...Editsfields,
        props: { ...props }
      }))
      // console.log(newField, '456789000000000================================================================')
      if (this.editType == 'table') {
        this.$store.commit('updateTableField', newField)
      } else {
        this.$store.commit('updateButtonField', { field: newField, types: this.editType_flag })
      }
    },
    onSelectOne: function (vm) {
      this.selectNode = null
      this.selectNode = vm
      // console.log(this.editType)
      if (this.editType == 'table' || this.editType == 'button') {
        this.tableEditFields = vm;
      }
      console.log(this.selectNode, this.editType);
    },
    onSelectTabsOne: function (vm) {
      this.selectTabsNode = null
      this.selectTabsNode = vm
    },
  }
}
</script>
